import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaTop, WeaRightMenu, WeaAlertPage, WeaLocaleProvider, WeaTab } from 'ecCom';
import { Button, Input, Modal } from 'antd';
import { observable, action, toJS } from 'mobx';
import { WeaTableNew } from 'comsMobx';

const WeaTable = WeaTableNew.WeaTable;
import ViewRegularSms from './ViewRegularSms';
import ViewRegularMemberList from './ViewRegularMemberList';

const getLabel = WeaLocaleProvider.getLabel;

const confirm = Modal.confirm;
@inject('smsRegularStore')
@inject('sendSmsStore')
@observer
class SmsRegular extends React.Component {
	constructor(props) {
		super(props);
	}
	componentDidMount() {
		const { smsRegularStore } = this.props;
		smsRegularStore.initData();
	}

	render() {
		const { smsRegularStore } = this.props;
		const { dataKey, comsWeaTableStore, form } = smsRegularStore;
		const tableNow = comsWeaTableStore;
		let title = getLabel(519174, '定时发送短信列表');

		return (
			<div className="sms-list" id="sms-list">
				<ViewRegularSms ecId={`${this && this.props && this.props.ecId || ''}_ViewRegularSms@st4s8g`}
  visible={smsRegularStore.regularSmsVisible}
  doClose={() => {
						smsRegularStore.closeRegularSmsInfo();
					}}
  regularSmsId={smsRegularStore.regularSmsId}
				/>

				<ViewRegularMemberList ecId={`${this && this.props && this.props.ecId || ''}_ViewRegularMemberList@5j11sr`}
          visible={smsRegularStore.regularMemberListVisible}
          doClose={() => {
                    smsRegularStore.closeRegularMemberList();
                  }}
          regularSmsId={smsRegularStore.regularSmsId}
				/>

				<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@rws5jy`} datas={this.getRightMenu(dataKey, comsWeaTableStore)} onClick={this.onRightMenuClick.bind(this)}>
					<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@ysydhw`}
  title={title}
  loading={smsRegularStore.loading}
  icon={<i className="icon-coms-message" />}
  iconBgcolor="#0079de"

  buttons={this.getTopButtons(dataKey, comsWeaTableStore)}
  showDropIcon={true}
  dropMenuDatas={this.getRightMenu(dataKey, comsWeaTableStore)}
  onDropMenuClick={this.onRightMenuClick.bind(this)}
					>
						<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@5xmpho`}
                searchType={['base', 'advanced']}
                showSearchAd={smsRegularStore.ifShowSearchAd}
                            // 这里接收的是切换显隐之后相应的bool值
                setShowSearchAd={(bool) => {
                              smsRegularStore.setShowSearchAd(bool);
                            }}
                searchsAd={smsRegularStore.getSearchs(smsRegularStore)}
                buttonsAd={smsRegularStore.getTabButtonsAd(smsRegularStore)}
                onSearch={(v) => { smsRegularStore.doSearch(); }}
                onSearchChange={(v) => {
               smsRegularStore.setSearchKey(v);
                              form.updateFields(
                                {
                                  searchKey: {
                                  value: v,
                                  },
                                },
                                true,
                                );
              }}
                advanceHeight={180}
                searchsBaseValue={form.isFormInit && form.getFormParams() && form.getFormParams().searchKey || ''}
						/>
						<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@ul9fck`}
              sessionkey={dataKey}
              hasOrder={true}
              needScroll={true}
              onOperatesClick={this.onOperatesClick}
              comsWeaTableStore={comsWeaTableStore}
              getColumns={this.getNewColumns}
						/>
					</WeaTop>
				</WeaRightMenu>

			</div>
		);
	}

	getTopButtons(dataKey, comsWeaTableStore) {
		const tableKey = dataKey !== '0' ? dataKey.split('_')[0] : 'init';
		const selectedRowKeys = toJS(comsWeaTableStore).selectedRowKeys;
		let btns = [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@o45s31@$getTopButtons_batchDeleteBtn`} type="primary" disabled={selectedRowKeys.length === 0} onClick={() => { this.onRightMenuClick('delete'); }}>{getLabel(32136, '批量删除')}</Button>];
		return btns;
	}

	// 右键菜单
	getRightMenu(dataKey, comsWeaTableStore) {
		let btns = [];
		const selectedRowKeys = toJS(comsWeaTableStore).selectedRowKeys;
		btns.push({
			key: 'delete',
			icon: <i className="icon-coms-delete" />,
			disabled: selectedRowKeys.length === 0,
			content: getLabel(32136, '批量删除'),
		});
		btns.push({
			key: 'colSet',
			icon: <i className="icon-coms-Custom" />,
			content: getLabel(382660, '显示定制列'),
			onClick: (key) => {
				comsWeaTableStore.setColSetVisible(dataKey, true);
				comsWeaTableStore.tableColSet(dataKey, true);
			},
		});
		return btns;
	}

	// 右键菜单事件绑定
	onRightMenuClick(key) {
		const { smsRegularStore, type } = this.props;
		const { comsWeaTableStore } = smsRegularStore;
		const selectedRowKeys = toJS(comsWeaTableStore).selectedRowKeys;
		let _that = this;
		let ids = '';
		for (let i = 0; i < selectedRowKeys.length; i++) {
			if (ids != '') { ids += ','; }
			ids += selectedRowKeys[i];
		}
		if (key == 'delete') {
			confirm({
				title: getLabel(131329, '信息确认'),
				content: getLabel(15097, '确定要删除吗？'),
				onOk() {
					_that.doDelete(ids);
				},
				onCancel() {

				},
			});
		}
	}

	doDelete = (ids) => {
		const { smsRegularStore } = this.props;
		smsRegularStore.deleteSmsRegular({ ids }).then((rdata) => {
			smsRegularStore.doSearch();
		});
	}

	doSendSms = (ids, receiverType) => {
		const { smsRegularStore } = this.props;
		smsRegularStore.sendSmsRegular({ id: ids, receiverType }).then((rdata) => {
			smsRegularStore.doSearch();
		});
	}

	stopSendSms = (ids) => {
		const { smsRegularStore } = this.props;
		smsRegularStore.stopSmsRegular({ id: ids }).then((rdata) => {
			smsRegularStore.doSearch();
		});
	}

	onOperatesClick = (record, index, operate, flag, argumentString) => {
		let smsRegularStore = this.props.smsRegularStore;
		let operateType = operate.index;
		const id = record.id;
		const receiverType = record.receiverType;
		let _that = this;
		if (operateType == 0) { // 编辑
			this.viewRegularSms(id);
		} else if (operateType == 1) { // 立即发送
			confirm({
				title: getLabel(131329, '信息确认'),
				content: getLabel(519609, '确定立即发送？'),
				onOk() {
					_that.doSendSms(id, receiverType);
				},
				onCancel() {

				},
			});
		} else if (operateType == 3) { // 继续发送
			confirm({
				title: getLabel(131329, '信息确认'),
				content: getLabel(519611, '确定继续发送？'),
				onOk() {
					_that.doSendSms(id, receiverType);
				},
				onCancel() {

				},
			});
		} else if (operateType == 2) { // 暂停发送
			confirm({
				title: getLabel(131329, '信息确认'),
				content: getLabel(519610, '确定暂停发送？'),
				onOk() {
					_that.stopSendSms(id);
				},
				onCancel() {

				},
			});
		} else if (operateType == 4) { // 删除
			confirm({
				title: getLabel(131329, '信息确认'),
				content: getLabel(15097, '确定要删除吗？'),
				onOk() {
					_that.doDelete(id);
				},
				onCancel() {

				},
			});
		}
	}


	// 自定义过滤渲染
	getNewColumns = (columns) => {
		let newColumns = '';
		newColumns = columns.map((column) => {
			let newColumn = column;
			// 表格的标题列的前端元素改造
			if (newColumn.dataIndex === 'id1') {
				newColumn.render = (text, record, index) => {
					let valueSpan = record[`${newColumn.dataIndex}span`] !== undefined ? record[`${newColumn.dataIndex}span`] : record[newColumn.dataIndex];
					return (
						<div className="wea-url-name" style={{ cursor: 'pointer' }} onClick={() => { this.viewRegularSms(record.id); }} dangerouslySetInnerHTML={{ __html: valueSpan }} />
					);
				};
			}
			if (newColumn.dataIndex === 'id2') {
				newColumn.render = (text, record, index) => {
					let valueSpan = record[`${newColumn.dataIndex}span`] !== undefined ? record[`${newColumn.dataIndex}span`] : record[newColumn.dataIndex];
					return (
						<div className="wea-url-name"
  style={{ cursor: 'pointer' }}
  onClick={() => {
								if (record.receiverType == '0') {
									this.viewRegularSms(record.id);
								} else {
									this.viewRegularMemberList(record.id);
								}
							}

							}
  dangerouslySetInnerHTML={{ __html: valueSpan }}
						/>
					);
				};
			}
			return newColumn;
		});
		return columns;
	}

	viewRegularSms = (id) => {
		const { sendSmsStore, smsRegularStore } = this.props;
		smsRegularStore.setRegularSmsId(id);
		// smsRegularStore.openRegularSmsInfo();
		sendSmsStore.getBaseData({ regularId: id, from: 'regular' }, () => {
			smsRegularStore.openRegularSmsInfo();
		});
		sendSmsStore.getOptions();
	}

	viewRegularMemberList = (id) => {
		const { smsRegularStore } = this.props;
		const { setRegularSmsId, getSmsRegularMemberList } = smsRegularStore;
		setRegularSmsId(id);
		getSmsRegularMemberList({ regularId: id });
	}
}

export default SmsRegular;
